<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>关注成长</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
    <script type="text/javascript" src="js/vue.js"></script>
    <link rel="stylesheet" href="css/element-ui-index.css"/>
    <script type="text/javascript" src="js/element-ui-index.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/md5.js"></script>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="app" style="width: 100%;">
<template style="width: 100%;">

    <div style="padding: 20px;color: rgb(0 0 0);text-decoration: none;font-size: smaller;">
        <el-button style="color:#3a8ee6;" icon="el-icon-back" circle size="mini" onclick="window.location.href='./mgr.html'"></el-button>
    </div>

    <div style="text-align: center;margin: 24px;font-size: x-middle;">{{title}}</div>

    <div style="text-align: center;font-size: medium;color: #000000;padding: 12px 0px 12px 0px;margin: 0px 36px;">
        <el-input v-model="examination.name"></el-input>
    </div>
    <el-select v-model="examination.sid" placeholder="请选择学校" style="margin:10px 36px; display: block;">
        <el-option  v-for="item in schools" :key="item.sid" :label="item.name" :value="item.sid"></el-option>
    </el-select>

    <!-- 登记新数据 -->
    <div class="fill-form" style="margin: 36px;">
        <el-form :model="examination" ref="fillFormRef">
            <el-row>
                <el-col :span="2">
                    <el-form-item v-for="(item,index) in examination.courses" :key="index"
                        :prop="'courses.'+index+'.checked'"
                        :rules="{
                            trigger: 'change', validator: function(rule,value,callback){
                                resetForm();
                                callback();
                            }
                        }"
                    >
                        <el-checkbox v-model="item.checked"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="22">
                    <el-form-item v-for="(item,index) in examination.courses" 
                        :key="index" :label="item.name" 
                        :prop="'courses.'+index+'.full_result'" 
                        :rules="{
                            required: true, trigger: 'blur', validator: function(rule,value,callback) {
                                if(item.checked){
                                    if(!value){ return callback('请输入正确的成绩');}
                                    else if(!(/^\d*.?[0-9]{1,2}?$/).test(value)){return callback('请输入正确的成绩');}
                                    else if(value<0 || value>150){return callback('请输入正确的成绩');}
                                    else{callback();}
                                }else{callback();}
                            }
                        }"
                        label-width="55px"
                    >
                        <template v-if="item.checked">
                            <el-input v-model="item.full_result" :placeholder="item.full_result"></el-input>
                        </template>
                        <template v-else>
                            <el-input v-model="item.full_result" :placeholder="item.full_result" disabled></el-input>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-button type="primary" :loading="loadingBtn" @click="submitExamination" class="el-col-24">
                        <div v-if="!loadingBtn">确认提交</div>
                    </el-button>
                </el-col>
            </el-row>

        </el-form>
    </div>

</template>
</div>
</body>

<script type="text/javascript">
new Vue({
    el: '#app',
    data() {
        return {
            token: "",
            title:"",
            exam_id: '1234',
            schools: [ { "sid": 1, "name": "人大附中西山学校" } ],
            courses: [ { "cid": 1, "name": "语文" } ],
            examination: {
                "eid": 0,
                "name": "输入考试名称",
                "sid": 1,
                "courses": [
                    { "cid": 2, "name": "数学", "full_result": 100, checked:true },
                    { "cid": 9, "name": "化学", "full_result": 100, checked:true }
                ]
            },
            loadingBtn: false
        }
    },
    created() {
        this.token = sessionStorage.getItem("token");
        this.exam_id = sessionStorage.getItem("exam_id");
        if (!this.token) {
            top.location.href = "login.html";
            return;
        }
        this.exam_id = sessionStorage.getItem("exam_id");
        if (this.exam_id == 0) {
            this.title = "添加考试"
        } else {
            this.title = "修改考试"
        }
    },
    mounted() {
        this.getSchools();
        this.getCourses();
        if (this.exam_id > 0) { this.getExamination(this.exam_id); }
    },
    methods: {
        async getSchools() {
            var params = {};
            params.token = this.token;
            this.loading = true;
            let _this = this;
            axios.post("/api/mgr_schools", params)
                .then(function (res) {
                    if (res.data.rcode == 0) {
                        console.log('-> ',res.data)
                        _this.loading = false;
                        _this.schools = res.data.body
                    } else {
                        _this.loading = false;
                        return _this.$message.error("get schools failure");
                    }
                })
                .catch(function (error) {
                    _this.loading = false;
                    return _this.$message.error("系统异常.");
                });
        },
        async getCourses() {
            var params = {};
            params.token = this.token;
            this.loading = true;
            let _this = this;
            axios.post("/api/mgr_courses", params)
                .then(function (res) {
                    if (res.data.rcode == 0) {
                        console.log('-> ',res.data)
                        _this.loading = false;
                        if (_this.exam_id == 0) {
                            _this.examination.eid = 0
                            _this.examination.name = "输入考试名称"
                            _this.examination.courses = res.data.body
                            //_this.examination.courses.full_result = 100
                            //_this.examination.courses.full_result_o = 100
                        }
                    } else {
                        _this.loading = false;
                        return _this.$message.error("get courses failure");
                    }
                })
                .catch(function (error) {
                    _this.loading = false;
                    return _this.$message.error("系统异常.");
                });
        },
        async getExamination(exam_id) {
            console.log('getExamination() ',exam_id)
            var params = {};
            params.token = this.token;
            params.exam_id = exam_id;
            this.loading = true;
            let _this = this;
            axios.post("/api/mgr_examinationDetail", params)
                .then(function (res) {
                    if (res.data.rcode == 0) {
                        console.log('-> ',res.data)
                        _this.loading = false;
                        _this.examination = res.data.body
                        for (let i in _this.examination.courses) {
                            if (_this.examination.courses[i].full_result > 0) {
                                _this.examination.courses[i].checked = true;
                            }
                            //_this.examination.courses[i].full_result_o = _this.examination.courses[i].full_result
                        }
                        this.exam_id = _this.examination.eid
                    } else {
                        _this.loading = false;
                        return _this.$message.error("获取考试信息失败");
                    }
                })
                .catch(function (error) {
                    _this.loading = false;
                    return _this.$message.error("系统异常.");
                });
        },
        async submitExamination() {
            this.$refs.fillFormRef.validate(async valid => {
                if (!valid) return this.$message.error("请输入有效的考试成绩");
                for (let i in this.examination.courses) {
                    if (!this.examination.courses[i].checked) {
                        this.examination.courses[i].full_result = 0
                    }
                }
                let params = {
                    eid : this.exam_id,
                    sid : this.examination.sid,
                    name : this.examination.name,
                    courses : this.examination.courses
                }
                console.log('-> ',params)
                this.loadingBtn = true;
                let _this = this;
                axios.post("/api/mgr_addExamination", params)
                    .then(function (res) {
                        if (res.data.rcode == 0) {
                            window.location.href = "mgr.html";
                            return;
                        } else {
                            _this.loadingBtn = false;
                            return _this.$message.error("系统异常");
                        }
                    })
                    .catch(function (error) {
                        _this.loadingBtn = false;
                        return _this.$message.error("系统异常");
                    });
            })
        },
        // 获取选择内容
        selectSchool(sid) {
            let obj = {};
            obj = this.schools.find(item=>{ 
                return item.sid === sid; 
            });
            this.examination.name = obj.name;
            console.log("选择学校内容=>",JSON.stringify(obj));
        },
        resetForm() {
            this.$refs.fillFormRef.clearValidate();
        }
    }
})
</script>

</html>
